<template>
  <div :class="className" :style="style"></div>
</template>

<script>
let echarts = require('echarts')
require('echarts/theme/macarons'); // echarts 主题
import {WEEK_AXIS} from "@/helper/share";

export default {
  props: {
    className: {
      type: String,
      default: 'pieChart'
    },
    width: {
      type: String,
      default: '90%'
    },
    info: {
      type: Array
    }
  },
  data() {
    return {
      style: {
        width: this.width,
        height: '300px',
        backgroundColor: 'white',
        margin: '0 0.53333rem 0.26667rem',
        borderRadius: '0.26667rem'
      }
    };
  },
  computed: {
    chartPieData() {
      return this.info.map((value, index) => {
        return {value: value.count, name: WEEK_AXIS[index]}
      })
    },
    totalPie() {
      let sum = 0;
      for (let i = 0; i < this.chartPieData.length; i++) {
        sum += this.chartPieData[i].value;
      }
      return sum;
    }
  },
  methods: {
    initChart() {
      let myChart = new echarts.init(document.querySelector('.' + this.className), 'macarons');

      let option = {
        xAxis: {
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: WEEK_AXIS
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
          formatter: '星期{b} : {c} 次'
        },
        series: [{
          name: 'show',
          type: 'pie',
          radius: ['38%', '63%'],
          center: ["50%", "40%"],
          seriesLayoutBy: 'row',
          label: {
            show: false,
          },
          data: this.chartPieData
        },
          {
            name: 'hidden',
            radius: ['60%', '67%'],
            type: 'pie',
            seriesLayoutBy: 'row',
            itemStyle: {
              opacity: 0,
            },
          }
        ],
        title: {
          text: '喝水总次数',
          x: 'center',
          y: '34%',
          textStyle: {
            fontWeight: 300,
            fontSize: 14
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '44%',

          style: {
            text: this.totalPie,
            textAlign: 'center',
            fill: '#000',
            width: 30,
            fontSize: 18,
          }
        }
      };

      myChart.setOption(option);
    }
  }
}
</script>

